<% content_for :stylesheet_head do %>
        <style>
          .bu,button.button,tr td button {
                padding: 2px 10px;
                margin: 0px 10px;
                background: #009bce;
                border-radius: 4px;
                border: 1px;
                color: #fff;
            }

            .bb{
                  text-align: center;
                  display: inline-block;
                  width: 80%;
                  text-align: center;

              }
           .aa{
                 display: inline-block;
                 width: 20%;
                 margin-right: 30px;
                 background: #fff;
              }

          #treeDemo_new{
                width: 140px;display: none;position: absolute;background: #fff;
            }
        </style>
<% end %>

<!-- 隐藏框 -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ModalLabel">新增机构</h4>
      </div>
        <%= form_tag("/section_create", {:method=>:post,:onsubmit => "return CheckForm()",:id=>'create_new', :class=>"form-horizontal"}) do %>
              <div class="modal-body">
                      <table class="table  list_table">
                        <tbody>
                                <tr>
                                      <td>
                                          机构名称<span style="color: red">*</span>
                                      </td>
                                      <td>
                                        <input type="text" id="section_name" name="section_name" class="form-control" placeholder="请输入部门名称"/>
                                      </td>
                                </tr>
                                <tr>
                                      <td>
                                          机构地址<span style="color: red">*</span>
                                      </td>
                                      <td>
                                        <input type="text" id="section_address" name="section_address" class="form-control" placeholder="请输入机构地址"/>
                                      </td>
                                </tr>
                                <tr>
                                      <td>
                                          机构电话<span style="color: red">*</span>
                                      </td>
                                      <td>
                                        <input type="text" id="section_tel" name="section_tel" class="form-control" placeholder="请输入机构电话"/>
                                      </td>
                                </tr>
                                <tr>
                                      <td>
                                        上级机构<span style="color: red">*</span>
                                      </td>
                                      <td>
                                          <div  id="aaa">
                                            <input name="father_section_name" type="text" id="site" readonly  placeholder="请选择上级机构">
                                            <div id="tree_new">
                                                  <ul id="treeDemo_new" class="ztree"></ul>
                                                  </ul>
                                            </div>
                                            <input name="father_id" type="hidden" id='father_demo' >
                                          </div>
                                      </td>
                              </tr>

                        </tbody>
                      </table>
             </div>

            <div class="modal-footer">
                <button type="reset" class="btn btn-default" data-dismiss="modal">
                             关闭
                        </button>
                <button type="submit" class="btn btn-primary" >
                             提交
                        </button>
              </div>
          </div>
   <% end %>
     <div class="WhereToLinks"></div>
  </div>
</div>
<!-- 隐藏框 -->
    <div class="listFilter" style="margin: 20px;">
      <h2>组织维护</h2>
      <div class="divider"></div>
      <div class="bu" data-toggle="modal" data-target="#Modal" onclick="cl()" style="margin-bottom:10px;min-width: 100px;text-align: center;float: right;cursor: pointer;">
        新增
      </div>
      <div class="list_table"  style="margin-top: 70px;display:flex;">
        <div class="aa ztree" id="treeDemo" style="border: 2px solid red; ">

        </div>
        <table class="bb list_table"  cellspacing="0" style="text-align:left" >
          <thead>
            <tr>
              <th width='1%'>序号</th>
              <th width='1%'>部门</th>
              <th width='1%'>地址</th>
              <th width='1%'>电话</th>
              <th width='1%'>上级部门</th>
              <th width='1%'>操作</th>
            </tr>
          </thead>
          <tbody id="tbody">

          <%  if @sections != nil
             odd_or_even = 0
             tmp=0
            @sections.each do |sections|
               next if sections.id==0
               tmp = tmp+1
          -%>
                  <tr class="odd_row">
                      <td><%= h(tmp) %></td>
                      <td><%= sections.section_name %></td>
                      <td><%= sections.section_address %></td>
                      <td><%= sections.section_tel %></td>
                      <td><%= sections.name %></td>
                      <td >            
                          <%= link_to "删除机构",section_path(sections), {style:"color:red",method: :delete, data: { confirm: '确认删除机构?' } } %>  
                           <%= link_to "小区管理",edit_section_path(sections),{style:"color:red" }%> 
                      </td>
                 </tr>
            <% end %>
            <% end %>
          <tr>
            <td colspan="4">
               <%= will_paginate(@sections ,:previous_label=>'上一页',:next_label=>'下一页')  %>
            </td>
         </tr>
          </tbody>
        </table>
        <div class="WhereToLinks"></div>
      </div>
    </div>
    <% content_for :javascript_fool do %>
      <script type="text/javascript">
                function CheckForm() {
                    var section_name = document.getElementById("section_name");
                    var site = document.getElementById("site");

                    if (section_name.value == "") {
                        alert("请输入部门名称！");
                        section_name.focus();
                        return false;
                    }
                    if (site.value == "") {
                        alert("请输入上级机构！");
                        site.focus();
                        return false;
                    }
                    var url="/section/sec_save?a="+section_name.value+'&b='+appid;
                    var ls=false
                    $.ajax({url:url,
                            async:false,
                            type: "get",
                            success:function(r){
                                                  if (r==1 )
                                                     {
                                                       alert("组织机构已存在");
                                                       ls=true;
                                                     }
                                               }
                         })
                    if (ls)  //禁止提交
                    {return false}
                  }


                  $(function(){
                      $("div").click(function(e){
                          var id = $(this).attr("id");
                          if(id == "aaa"){
                              return false;
                          }else if(id == "tree"){
                              return false;
                          }else{
                              $("#treeDemo_new").slideUp(300);
                          }
                      })

                      $("#site").click(function(e){
                          $("#treeDemo_new").slideDown(300);
                      })
                      $("#tree").hover(function(){},function(){
                          $("#treeDemo_new").slideUp(300);
                      })
                  })

                  function json_array(data){
                             var arr=[];
                             arr[0]=data;
                             return arr;
                  }
                  // tree节点点击事件  name为这个节点的值
                  var appid=-1;
                  function zTreeOnClick(event, treeId, treeNode) {
                            $("#site").val(treeNode.name);
                            appid=treeNode.appid;
                            $("#father_demo").val(appid);
                  };
                  var setting = {
                      callback: {
                          onClick: zTreeOnClick
                      }
                  };
                  var data=<%=get_tree_root_yh.to_s.html_safe %>;
                  var zNodes =json_array(data);
                  $(function(){
                      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                      $("#treeDemo").prepend("<h1 style='font-size:1em;margin-bottom:10px;color:red;' >当前组织机构:</h1>");
                  })
                  function cl(){
                      $.fn.zTree.init($("#treeDemo_new"), setting, zNodes);
                      $('#create_new')[0].reset();
                  }
      </script>
    <% end %>
